<template>
	<view class="page-container">
		<u-navbar bgColor="#F5F9FC" :placeholder="true" :border="true" height="48px">
			<view slot="left" class="navbar-left">
				<navigator url="/pageNew/salary/salary" class="back-button">
					<view class="nav-back-content">
						<u-icon color="#1e88e5" name="arrow-left" size="20"></u-icon>
						<text class="nav-title">社保公积金规则管理</text>
					</view>
				</navigator>
			</view>
		</u-navbar>

		<view class="config-desc">
			<text>以下为社保公积金规则，可根据企业需求调整启用状态和参数配置</text>
		</view>

		<view class="field-list">
			<!-- 加载中状态 -->
			<view class="loading-state" v-if="isLoading && socialRules.length === 0">
				<u-loading size="24" color="#1e88e5"></u-loading>
				<text class="loading-text">加载中...</text>
			</view>

			<!-- 空数据状态 -->
			<view class="empty-state" v-if="!isLoading && socialRules.length === 0">
				<u-icon name="none-data" size="60" color="#ccc"></u-icon>
				<text class="empty-text">暂无社保公积金规则数据</text>
			</view>

			<view class="field-item" v-for="rule in socialRules" :key="rule.id">
				<view class="field-info">
					<view class="field-name">
						{{ rule.socialTypeName }}
						<text class="field-tag area-tag">
							<u-icon name="map-marker" size="10" class="tag-icon"></u-icon>
							{{ rule.area }}
						</text>
						<!-- 直接通过三元表达式设置样式 -->
						<text class="field-tag type-tag" :style="[
								rule.socialType === 1 ? {backgroundColor: '#e6f7ff', color: '#409eff'} : 
								rule.socialType === 2 ? {backgroundColor: '#e8f4f8', color: '#38b2ac'} : 
								rule.socialType === 3 ? {backgroundColor: '#f0fdf4', color: '#27ae60'} : 
								rule.socialType === 4 ? {backgroundColor: '#fff7e6', color: '#e6a23c'} : 
								{backgroundColor: '#fdf2f8', color: '#9f7aea'}
							]">
							{{ rule.socialType === 3 ? '公积金' : '社保' }}
						</text>
						<text class="field-tag default-tag" v-if="rule.isDefault">
							<u-icon name="star" size="10" class="tag-icon"></u-icon>
							默认规则
						</text>
					</view>
					<view class="field-detail">
						<text>规则说明: {{ rule.remark }}</text>
						<text>基数范围: {{ rule.baseMin.toFixed(2) }} - {{ rule.baseMax.toFixed(2) }}</text>
						<text class="ratio-text">个人: {{ (rule.personalRatio * 100).toFixed(2) }}% 公司:
							{{ (rule.companyRatio * 100).toFixed(2) }}%</text>
						<text class="date-text">生效日期: {{ rule.effectiveDate }} 至 {{ rule.expireDate || '永久' }}</text>
					</view>
				</view>

				<view class="field-actions">
					<view class="action-icons">
						<!-- 修复：添加data-id属性，便于调试确认点击的是哪个规则 -->
						<u-icon name="edit-pen" size="20" color="#6b7280" @click="editRule(rule)"
							:data-id="rule.id"></u-icon>
						<u-icon name="trash" size="20" color="#ff4d4f" @click="deleteRule(rule.id)"></u-icon>
					</view>
				</view>
			</view>

			<!-- 上拉加载状态提示 -->
			<view class="load-more" v-if="showLoadMore">
				<u-loading size="20" color="#1e88e5"></u-loading>
				<text class="load-text">加载中...</text>
			</view>

			<!-- 没有更多数据提示 -->
			<view class="no-more" v-if="!isLoading && !showLoadMore && socialRules.length > 0 && !hasMore">
				<text class="no-more-text">没有更多数据了</text>
			</view>
		</view>

		<view class="add-btn-container">
			<view class="add-btn" @click="addCustomRule">
				<u-icon name="plus" size="20" color="#ffffff"></u-icon>
				<text class="add-btn-text">添加规则</text>
			</view>
		</view>

		<!-- 弹窗表单 -->
		<u-popup :show="showRuleDialog" :round="10" mode="center" @close="closePopup" @open="openPopup">
			<view class="popup-content">
				<view class="popup-title">
					<text>{{ currentRule.id ? '编辑规则' : '添加规则' }}</text>
				</view>

				<view class="form-container">
					<!-- 险种类型选择 -->
					<view class="form-item">
						<text class="form-label">险种类型</text>
						<view class="form-input" @click="showSocialTypePicker = true">
							<text>{{ currentRule.socialTypeName || '请选择险种类型' }}</text>
							<u-icon name="arrow-right" size="14" color="#ccc" class="picker-icon"></u-icon>
						</view>
					</view>

					<!-- 地区输入 -->
					<view class="form-item">
						<text class="form-label">地区</text>
						<input type="text" v-model="currentRule.area" placeholder="请输入地区，如：杭州"
							class="form-input"></input>
					</view>

					<!-- 规则名称（对应remark字段） -->
					<view class="form-item">
						<text class="form-label">规则名称</text>
						<input type="text" v-model="currentRule.remark" placeholder="请输入规则名称，如：2025年杭州养老保险政策"
							class="form-input"></input>
					</view>

					<!-- 基数下限 -->
					<view class="form-item">
						<text class="form-label">基数下限</text>
						<input type="number" v-model="currentRule.baseMin" placeholder="请输入基数下限" class="form-input"
							step="0.01"></input>
					</view>

					<!-- 基数上限 -->
					<view class="form-item">
						<text class="form-label">基数上限</text>
						<input type="number" v-model="currentRule.baseMax" placeholder="请输入基数上限" class="form-input"
							step="0.01"></input>
					</view>

					<!-- 个人比例 -->
					<view class="form-item">
						<text class="form-label">个人比例(%)</text>
						<input type="number" v-model="currentRule.personalRatio" placeholder="请输入个人缴纳比例"
							class="form-input" step="0.01"></input>
					</view>

					<!-- 公司比例 -->
					<view class="form-item">
						<text class="form-label">公司比例(%)</text>
						<input type="number" v-model="currentRule.companyRatio" placeholder="请输入公司缴纳比例"
							class="form-input" step="0.01"></input>
					</view>

					<!-- 生效日期 -->
					<view class="form-item">
						<text class="form-label">生效日期</text>
						<view class="form-input" @click="showEffectiveDatePicker = true">
							<text>{{ currentRule.effectiveDate }}</text>
							<u-icon name="arrow-right" size="14" color="#ccc" class="picker-icon"></u-icon>
						</view>
					</view>

					<!-- 失效日期 -->
					<view class="form-item">
						<text class="form-label">失效日期</text>
						<view class="form-input" @click="showExpireDatePicker = true">
							<text>{{ currentRule.expireDate || '永久' }}</text>
							<u-icon name="arrow-right" size="14" color="#ccc" class="picker-icon"></u-icon>
						</view>
					</view>

					<!-- 是否默认 -->
					<view class="form-item">
						<text class="form-label">是否默认</text>
						<u-switch v-model="currentRule.isDefault" @change="() => {}"></u-switch>
					</view>
				</view>

				<view class="popup-actions">
					<view class="btn-cancel" @click="closePopup">取消</view>
					<view class="btn-submit" @click="saveRule">确定</view>
				</view>
			</view>
		</u-popup>

		<!-- 险种类型选择器 -->
		<u-picker :show="showSocialTypePicker" :columns="socialTypeColumns" keyName="label"
			@confirm="handleSocialTypeConfirm" @cancel="showSocialTypePicker = false"></u-picker>

		<!-- 生效日期选择器 -->
		<u-datetime-picker :show="showEffectiveDatePicker" v-model="effectiveDate" mode="date"
			:formatter="dateFormatter" @confirm="handleEffectiveDateConfirm"
			@cancel="showEffectiveDatePicker = false"></u-datetime-picker>

		<!-- 失效日期选择器 -->
		<u-datetime-picker :show="showExpireDatePicker" v-model="expireDate" mode="date" :formatter="dateFormatter"
			@confirm="handleExpireDateConfirm" @cancel="showExpireDatePicker = false"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				companyInfo: uni.getStorageSync('companyInfo'),
				http: uni.$u.http, // 统一请求实例
				socialRules: [],
				// 险种类型配置（1-养老保险，2-医疗保险，3-公积金，4-失业保险，5-生育保险）
				socialTypeColumns: [
					[{
							label: '养老保险',
							value: 1
						},
						{
							label: '医疗保险',
							value: 2
						},
						{
							label: '公积金',
							value: 3
						},
						{
							label: '失业保险',
							value: 4
						},
						{
							label: '生育保险',
							value: 5
						}
					]
				],
				// 当前操作的规则（移除isEnabled字段）
				currentRule: {
					id: '',
					socialType: '', // 险种类型
					socialTypeName: '', // 险种类型名称（新增时关联remark）
					area: '',
					remark: '', // 规则名称（原规则说明，现在作为名称）
					baseMin: '',
					baseMax: '',
					personalRatio: '', // 个人比例（前端显示为%，后端存储为小数）
					companyRatio: '', // 公司比例（前端显示为%，后端存储为小数）
					effectiveDate: '', // 生效日期（默认当前时间）
					expireDate: '', // 失效日期（可选）
					isDefault: false
				},
				// 弹窗控制
				showRuleDialog: false,
				// 选择器控制
				showSocialTypePicker: false,
				showEffectiveDatePicker: false,
				showExpireDatePicker: false,
				// 日期选择器绑定值（Date对象格式）
				effectiveDate: new Date(), // 生效日期（默认当前时间）
				expireDate: null, // 失效日期（默认null）
				// 分页参数
				pageParams: {
					pageNum: 1,
					pageSize: 10,
					total: 0, // 总条数
					totalPage: 0 // 总页数
				},
				// 加载状态控制
				isLoading: false, // 全局加载状态（首次加载/下拉刷新）
				showLoadMore: false, // 上拉加载中提示
				hasMore: true // 是否还有更多数据
			};
		},
		computed: {
			// 获取公司ID（优先缓存，兜底默认值）
			companyId() {
				return this.companyInfo.id || '1986303016356728834';
			}
		},
		// 页面加载时自动执行（首次进入自动加载数据）
		onLoad() {
			// 校验公司ID
			if (!this.companyId) {
				uni.showToast({
					title: '请先选择公司',
					icon: 'none'
				});
				uni.navigateBack();
				return;
			}
			// 首次进入自动加载数据
			console.log('首次进入，自动加载数据');
			this.refreshData(); // 替换直接调用fetchSocialRules
		},
		// 页面下拉刷新事件（原生方法）
		onPullDownRefresh() {
			console.log('页面下拉刷新');
			this.refreshData(true); // 传入refresh=true表示下拉刷新
		},
		// 页面上拉触底事件（原生方法）
		onReachBottom() {
			console.log('页面上拉加载');
			// 如果还有更多数据且当前没有在加载中，则加载下一页
			if (this.hasMore && !this.isLoading && !this.showLoadMore) {
				this.pageParams.pageNum++;
				this.fetchSocialRules(false);
			}
		},
		methods: {
			// 统一刷新数据方法（替代直接调用onPullDownRefresh）
			refreshData(isPullDown = false) {
				// 重置分页参数，重新加载第一页
				this.pageParams.pageNum = 1;
				this.hasMore = true;
				// 调用数据加载方法
				this.fetchSocialRules(true, isPullDown);
			},

			// 格式化日期为 yyyy-MM-dd（修复：严格判断Date对象有效性）
			formatDate(date) {
				// 若为null/undefined/空字符串，直接返回空
				if (!date) return '';
				// 若为字符串，尝试转为Date对象（处理后端返回的字符串日期）
				let targetDate = date;
				if (typeof date === 'string') {
					// 兼容ISO格式（yyyy-MM-dd）和其他常见格式
					targetDate = new Date(date.replace(/-/g, '/'));
				}
				// 严格判断是否为有效Date对象（避免Invalid Date）
				if (!(targetDate instanceof Date) || isNaN(targetDate.getTime())) {
					return '';
				}
				const year = targetDate.getFullYear();
				const month = String(targetDate.getMonth() + 1).padStart(2, '0');
				const day = String(targetDate.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},

			// u-datetime-picker 格式化函数
			dateFormatter(type, value) {
				switch (type) {
					case 'year':
						return `${value}年`;
					case 'month':
						return `${value}月`;
					case 'day':
						return `${value}日`;
					default:
						return value;
				}
			},

			// 获取社保公积金规则列表（统一方法：支持首次加载、下拉刷新、上拉加载）
			async fetchSocialRules(refresh = false, isPullDown = false) {
				// 防止重复请求
				if (this.isLoading && !refresh) return;
				if (this.showLoadMore && !refresh) return;

				// 首次加载/下拉刷新：显示全局加载状态
				if (refresh) {
					this.isLoading = true;
				} else {
					// 上拉加载：显示底部加载中
					this.showLoadMore = true;
				}

				try {
					const res = await this.http.get('/VipSocialRule/list', {
						params: {
							companyId: this.companyId,
							pageNum: this.pageParams.pageNum,
							pageSize: this.pageParams.pageSize
						}
					});

					// 适配后端返回格式
					if (res.code === 200 && res.data?.data) {
						const {
							data,
							total,
							totalPage
						} = res.data;
						// 更新分页信息
						this.pageParams.total = total;
						this.pageParams.totalPage = totalPage;

						// 转换后端数据为前端需要的格式（移除isEnabled相关）
						const newRules = data.map(item => ({
							id: item.id,
							socialType: item.socialType,
							socialTypeName: item.remark || this.getSocialTypeName(item
								.socialType), // 优先取remark作为名称
							area: item.area,
							remark: item.remark, // 规则名称
							baseMin: item.baseMin,
							baseMax: item.baseMax,
							personalRatio: item.personalRatio,
							companyRatio: item.companyRatio,
							effectiveDate: this.formatDate(item.effectiveDate), // 格式化日期显示
							expireDate: this.formatDate(item.expireDate),
							isDefault: item.isDefault === 1
						}));

						// 下拉刷新直接替换，上拉加载追加数据
						this.socialRules = refresh ? newRules : [...this.socialRules, ...newRules];

						// 判断是否还有更多数据
						this.hasMore = this.pageParams.pageNum < this.pageParams.totalPage;
					} else {
						uni.showToast({
							title: '加载失败：' + (res.msg || '未知错误'),
							icon: 'none'
						});
						// 加载失败时恢复页码（上拉加载）
						if (!refresh) {
							this.pageParams.pageNum--;
						}
					}
				} catch (error) {
					console.error('获取社保公积金规则列表失败', error);
					uni.showToast({
						title: '网络错误，加载失败',
						icon: 'none'
					});
					// 加载失败时恢复页码（上拉加载）
					if (!refresh) {
						this.pageParams.pageNum--;
					}
				} finally {
					// 结束加载状态
					this.isLoading = false;
					this.showLoadMore = false;
					// 下拉刷新完成后关闭刷新状态（原生方法）
					if (isPullDown) {
						uni.stopPullDownRefresh();
					}
				}
			},

			// 根据险种类型获取名称（备用：当remark为空时使用）
			getSocialTypeName(type) {
				const typeMap = {
					1: '养老保险',
					2: '医疗保险',
					3: '公积金',
					4: '失业保险',
					5: '生育保险'
				};
				return typeMap[type] || '未知险种';
			},

			// 添加规则（初始化默认值：当前日期、清空表单）
			addCustomRule() {
				const currentDate = new Date();
				this.currentRule = {
					id: '',
					socialType: '',
					socialTypeName: '',
					area: '',
					remark: '',
					baseMin: '',
					baseMax: '',
					personalRatio: '',
					companyRatio: '',
					effectiveDate: this.formatDate(currentDate), // 默认当前日期（字符串格式）
					expireDate: '',
					isDefault: false
				};
				// 同步日期选择器值（Date对象格式）
				this.effectiveDate = currentDate;
				this.expireDate = null;
				this.showRuleDialog = true;
			},

			// 编辑规则（核心修复：优先使用列表传递的rule数据，接口作为兜底）
			async editRule(rule) {
				// 调试：打印当前点击的规则ID，确认是否正确传递
				console.log('编辑规则ID：', rule.id);

				try {
					// 方案1：直接使用列表已有的rule数据（避免重复请求，解决缓存问题）
					// 生效日期：转为Date对象（适配选择器）
					const effectiveDate = rule.effectiveDate ? new Date(rule.effectiveDate.replace(/-/g, '/')) :
						new Date();
					// 失效日期：转为Date对象（适配选择器）
					const expireDate = rule.expireDate ? new Date(rule.expireDate.replace(/-/g, '/')) : null;

					// 直接赋值当前规则（无需调用接口）
					this.currentRule = {
						id: rule.id,
						socialType: rule.socialType,
						socialTypeName: rule.socialTypeName,
						area: rule.area,
						remark: rule.remark,
						baseMin: rule.baseMin,
						baseMax: rule.baseMax,
						// 后端小数转前端百分比（保留2位小数）
						personalRatio: (rule.personalRatio * 100).toFixed(2),
						companyRatio: (rule.companyRatio * 100).toFixed(2),
						effectiveDate: rule.effectiveDate,
						expireDate: rule.expireDate,
						isDefault: rule.isDefault
					};

					// 同步日期选择器值（Date对象格式）
					this.effectiveDate = effectiveDate;
					this.expireDate = expireDate;
					this.showRuleDialog = true;

					// 方案2：如果需要接口校验最新数据（可选，防止列表数据过时）
					// 注释掉方案1，启用以下代码：
					/*
					const res = await this.http.get(`/VipSocialRule/${rule.id}`, {
						params: {
							companyId: this.companyId,
							// 加随机参数防止缓存
							t: new Date().getTime()
						}
					});
					if (res.code === 200 && res.data) {
						const item = res.data;
						const effectiveDate = item.effectiveDate ? new Date(item.effectiveDate.replace(/-/g, '/')) : new Date();
						const expireDate = item.expireDate ? new Date(item.expireDate.replace(/-/g, '/')) : null;

						this.currentRule = {
							id: item.id,
							socialType: item.socialType,
							socialTypeName: item.remark || this.getSocialTypeName(item.socialType),
							area: item.area,
							remark: item.remark,
							baseMin: item.baseMin,
							baseMax: item.baseMax,
							personalRatio: (item.personalRatio * 100).toFixed(2),
							companyRatio: (item.companyRatio * 100).toFixed(2),
							effectiveDate: this.formatDate(effectiveDate),
							expireDate: this.formatDate(expireDate),
							isDefault: item.isDefault === 1
						};
						this.effectiveDate = effectiveDate;
						this.expireDate = expireDate;
						this.showRuleDialog = true;
					} else {
						uni.showToast({
							title: '获取详情失败，使用列表缓存数据',
							icon: 'none'
						});
						// 接口失败时使用列表数据兜底
						this.currentRule = {
							id: rule.id,
							socialType: rule.socialType,
							socialTypeName: rule.socialTypeName,
							area: rule.area,
							remark: rule.remark,
							baseMin: rule.baseMin,
							baseMax: rule.baseMax,
							personalRatio: (rule.personalRatio * 100).toFixed(2),
							companyRatio: (rule.companyRatio * 100).toFixed(2),
							effectiveDate: rule.effectiveDate,
							expireDate: rule.expireDate,
							isDefault: rule.isDefault
						};
						this.effectiveDate = effectiveDate;
						this.expireDate = expireDate;
						this.showRuleDialog = true;
					}
					*/
				} catch (error) {
					console.error('编辑规则失败', error);
					uni.showToast({
						title: '加载详情失败',
						icon: 'none'
					});
				}
			},

			// 保存规则（新增时socialTypeName = remark）
			async saveRule() {
				// 基本校验
				if (!this.currentRule.socialType) {
					return uni.showToast({
						title: '请选择险种类型',
						icon: 'none'
					});
				}
				if (!this.currentRule.area.trim()) {
					return uni.showToast({
						title: '请输入地区',
						icon: 'none'
					});
				}
				if (!this.currentRule.remark.trim()) {
					return uni.showToast({
						title: '请输入规则名称',
						icon: 'none'
					});
				}
				if (!this.currentRule.baseMin || this.currentRule.baseMin <= 0) {
					return uni.showToast({
						title: '请输入有效的基数下限',
						icon: 'none'
					});
				}
				if (!this.currentRule.baseMax || this.currentRule.baseMax <= this.currentRule.baseMin) {
					return uni.showToast({
						title: '请输入有效的基数上限',
						icon: 'none'
					});
				}
				if (this.currentRule.personalRatio === '' || this.currentRule.personalRatio < 0) {
					return uni.showToast({
						title: '请输入有效的个人比例',
						icon: 'none'
					});
				}
				if (this.currentRule.companyRatio === '' || this.currentRule.companyRatio < 0) {
					return uni.showToast({
						title: '请输入有效的公司比例',
						icon: 'none'
					});
				}
				if (!this.currentRule.effectiveDate) {
					return uni.showToast({
						title: '请选择生效日期',
						icon: 'none'
					});
				}

				// 构造后端需要的数据格式（socialTypeName = remark）
				const formData = {
					socialType: this.currentRule.socialType,
					socialTypeName: this.currentRule.remark, // 新增/编辑时都用remark作为名称
					area: this.currentRule.area.trim(),
					remark: this.currentRule.remark.trim(), // 规则名称
					baseMin: Number(this.currentRule.baseMin),
					baseMax: Number(this.currentRule.baseMax),
					// 前端百分比转后端小数
					personalRatio: Number(this.currentRule.personalRatio) / 100,
					companyRatio: Number(this.currentRule.companyRatio) / 100,
					effectiveDate: this.currentRule.effectiveDate, // 提交字符串格式（yyyy-MM-dd）
					expireDate: this.currentRule.expireDate || null,
					isDefault: this.currentRule.isDefault ? 1 : 0,
					companyId: this.companyId
				};

				try {
					let res;
					if (this.currentRule.id) {
						// 编辑操作
						formData.id = this.currentRule.id;
						res = await this.http.put('/VipSocialRule', formData);
					} else {
						// 新增操作
						res = await this.http.post('/VipSocialRule', formData);
					}

					if (res.code === 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'success'
						});
						this.closePopup();
						// 操作成功后刷新数据（调用自定义刷新方法，而非原生生命周期）
						this.refreshData();
					} else {
						uni.showToast({
							title: '操作失败：' + (res.msg || '未知错误'),
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('保存规则失败', error);
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					});
				}
			},

			// 删除规则
			async deleteRule(id) {
				const rule = this.socialRules.find(item => item.id === id);
				uni.showModal({
					title: '确认删除',
					content: `确定要删除【${rule.socialTypeName} - ${rule.area}】规则吗？`,
					success: async (res) => {
						if (res.confirm) {
							try {
								const res = await this.http.delete(`/VipSocialRule/${id}`, {
									params: {
										companyId: this.companyId
									}
								});
								if (res.code === 200) {
									uni.showToast({
										title: '删除成功',
										icon: 'success'
									});
									// 删除成功后刷新数据（调用自定义刷新方法，而非原生生命周期）
									this.refreshData();
								} else {
									uni.showToast({
										title: '删除失败：' + (res.msg || '未知错误'),
										icon: 'none'
									});
								}
							} catch (error) {
								console.error('删除规则失败', error);
								uni.showToast({
									title: '删除失败',
									icon: 'none'
								});
							}
						}
					}
				});
			},

			// 险种类型选择确认
			handleSocialTypeConfirm(e) {
				const {
					value
				} = e;
				this.currentRule.socialType = value[0].value;
				// 新增时：如果还没输入规则名称，默认用险种类型名称
				if (!this.currentRule.remark) {
					this.currentRule.socialTypeName = value[0].label;
				} else {
					this.currentRule.socialTypeName = this.currentRule.remark; // 已输入名称则关联remark
				}
				this.showSocialTypePicker = false;
			},

			// 生效日期选择确认（修复：直接使用绑定的Date对象）
			handleEffectiveDateConfirm() {
				this.currentRule.effectiveDate = this.formatDate(this.effectiveDate);
				this.showEffectiveDatePicker = false;
			},

			// 失效日期选择确认（修复：直接使用绑定的Date对象）
			handleExpireDateConfirm() {
				this.currentRule.expireDate = this.formatDate(this.expireDate);
				this.showExpireDatePicker = false;
			},

			// 关闭弹窗
			closePopup() {
				// 修复：关闭弹窗时重置currentRule，避免下次打开残留数据
				this.currentRule = {
					id: '',
					socialType: '',
					socialTypeName: '',
					area: '',
					remark: '',
					baseMin: '',
					baseMax: '',
					personalRatio: '',
					companyRatio: '',
					effectiveDate: '',
					expireDate: '',
					isDefault: false
				};
				this.showRuleDialog = false;
				this.showSocialTypePicker = false;
				this.showEffectiveDatePicker = false;
				this.showExpireDatePicker = false;
			},

			// 空方法
			openPopup() {}
		}
	};
</script>

<style scoped>
	/* 样式不变，保持原有样式 */
	.page-container {
		min-height: 100vh;
		background-color: #f5f9fc;
		padding: 0 15px;
		padding-bottom: 80px;
		box-sizing: border-box;
	}

	.navbar-left .nav-back-content {
		display: flex;
		align-items: center;
	}

	.navbar-left .nav-title {
		color: #1e88e5;
		font-size: 17px;
		margin-left: 8px;
	}

	.config-desc {
		padding: 15px;
		margin: 15px 0;
		font-size: 14px;
		color: #6b7280;
		background-color: #e6f7ff;
		border-radius: 8px;
		line-height: 1.5;
	}

	.field-list {
		background-color: #ffffff;
		border-radius: 10px;
		padding: 15px 0;
		margin-bottom: 20px;
	}

	/* 首次加载状态 */
	.loading-state {
		text-align: center;
		padding: 60px 0;
		color: #1e88e5;
	}

	.loading-text {
		display: block;
		margin-top: 15px;
		font-size: 14px;
	}

	/* 空数据状态 */
	.empty-state {
		text-align: center;
		padding: 60px 0;
		color: #ccc;
	}

	.empty-text {
		display: block;
		margin-top: 15px;
		font-size: 14px;
	}

	.field-item {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 15px;
		margin: 8px 10px;
		background-color: #f9fafb;
		border-radius: 8px;
	}

	.field-info {
		flex: 1;
	}

	.field-name {
		font-size: 16px;
		color: #333;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 8px;
	}

	.field-tag {
		font-size: 12px;
		padding: 2px 8px;
		border-radius: 12px;
		margin-left: 8px;
		margin-top: 4px;
		display: inline-flex;
		align-items: center;
		gap: 3px;
	}

	.area-tag {
		color: #909399;
		background-color: #f5f5f5;
	}

	.default-tag {
		color: #e6a23c;
		background-color: #fff7e6;
	}

	.field-detail {
		font-size: 13px;
		color: #666;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.ratio-text {
		color: #1e88e5;
	}

	.date-text {
		color: #67c23a;
	}

	.field-actions {
		display: flex;
		align-items: center;
		gap: 15px;
	}

	.action-icons {
		display: flex;
		gap: 15px;
	}

	.add-btn-container {
		position: fixed;
		bottom: 20px;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		padding: 0 30px;
		box-sizing: border-box;
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		padding: 14px 0;
		background-color: #1E88E5;
		color: #ffffff;
		border-radius: 50px;
		font-size: 16px;
		box-shadow: 0 4px 15px rgba(30, 136, 229, 0.4);
	}

	.add-btn-text {
		font-weight: 500;
	}

	.popup-content {
		padding: 20px 25px;
		background-color: #ffffff;
		border-radius: 30rpx;
		max-width: 680px;
		max-height: 80vh;
		overflow-y: auto;
		box-sizing: border-box;
	}

	.popup-title {
		font-size: 18px;
		color: #333;
		font-weight: 500;
		margin-bottom: 20px;
		text-align: center;
	}

	.form-container {
		margin-bottom: 25px;
	}

	.form-item {
		display: flex;
		align-items: center;
		gap: 15px;
		margin-bottom: 18px;
	}

	.form-label {
		font-size: 14px;
		color: #333;
		width: 90px;
		text-align: right;
		flex-shrink: 0;
	}

	.form-input {
		display: flex;
		justify-content: flex-end;
		flex: 1;
		padding: 10px 0;
		border: none;
		border-bottom: 1px solid #e5e7eb;
		border-radius: 0;
		font-size: 14px;
		background-color: transparent;
		position: relative;
	}

	.form-input:focus {
		outline: none;
		border-bottom-color: #1E88E5;
		box-shadow: none;
	}

	.picker-icon {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.popup-actions {
		display: flex;
		gap: 15px;
	}

	.btn-cancel {
		flex: 1;
		padding: 13px 0;
		background-color: #f5f5f5;
		color: #333;
		border-radius: 8px;
		font-size: 15px;
		text-align: center;
	}

	.btn-submit {
		flex: 1;
		padding: 13px 0;
		background-color: #1E88E5;
		color: #fff;
		border-radius: 8px;
		font-size: 15px;
		text-align: center;
	}

	/* 上拉加载中样式 */
	.load-more {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
		color: #666;
		font-size: 14px;
	}

	.load-text {
		margin-left: 8px;
	}

	/* 没有更多数据样式 */
	.no-more {
		text-align: center;
		padding: 15px 0;
		color: #999;
		font-size: 14px;
	}

	/* 修复u-picker在底部的样式问题 */
	.u-picker__container {
		z-index: 9999 !important;
	}

	.u-datetime-picker__container {
		z-index: 9999 !important;
	}
</style>